<template>
  <div class="mb-10px">
    <div class="flex justify-between">
      <div class="font-size-16px font-600">{{ hasOne.label }}</div>
      <div v-if="Object.keys(crosses).length > 0" class="mb2">
        <el-button v-for="(item, cross) in crosses" :key="cross" @click="showData(data[cross], item)">
          {{ item.label }}({{ item.type == 'hasMany' ? data[cross]?.length : (data[cross] ? 1 : 0) }})
        </el-button>
      </div>
    </div>
    <el-form ref="formRef" :model="data" :rules="rules" status-icon>
      <el-form-item v-for="column in hasOne.columns" :label="column.label" :prop="toCamelCase(column.name)" :key="column.name">
        <el-input v-model="data[toCamelCase(column.name)]" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
  import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
  import { Cross } from '@/seed-application/types';
  import { popup } from '@/components/Popup'
  import { h } from 'vue'
  import UpdateList from './UpdateList.vue'
  import Update from './Update.vue'
  import { toCamelCase } from '@/utils/func';

  const props = defineProps<{hasOne: Cross, data: Record<string, any>}>()
  const hasOne = props.hasOne
  const data = props.data
  const crosses = hasOne.crosses

  const rules = {}
  const showData = (data: any, cross: Cross) => {
    popup({ title: cross.label }, {
      default: () => {
        if(cross.type == 'hasMany') return h(UpdateList, {hasMany: cross, data})
        return h(Update, {hasOne: cross, data})
      }
    })
  }
</script>